<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>迁移图</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="proj4,mapv" src="./static/libs/include-openlayers-local.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new ol.Map({
      //地图容器div的ID
      target: 'map',
      //地图容器中加载的图层
      layers: [],
      //地图视图设置
      view: new ol.View({
        //地图初始中心点
        center: ol.proj.fromLonLat([116, 30]),
        //地图初始显示级别
        zoom: 4,
        //最小级别
        minZoom: 1,
        //最大级别
        maxZoom: 12
      })
    });

    map.addLayer(new ol.layer.Tile({
      source: new ol.source.TileImage({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' +
          'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
      })
    }))

    var data = [];
    var timeData = [];

    function curive(fromPoint, endPoint, n) {
      var delLng = (endPoint.lng - fromPoint.lng) / n;
      var delLat = (endPoint.lat - fromPoint.lat) / n;

      for (var i = 0; i < n; i++) {
        var pointNLng = fromPoint.lng + delLng * i;
        var pointNLat = fromPoint.lat + delLat * i;
        timeData.push({
          geometry: {
            type: 'Point',
            coordinates: [pointNLng, pointNLat]
          },
          count: 1,
          time: i
        });
      }
    }

    // 构造数据
    $.ajax({
      url: '../../static/data/mapv/qianxi-time',
      success: function (rs) {
        var items = rs.split('|');
        for (var i = 0; i < items.length; i++) {
          var itemArr = items[i].split(/\n/);
          for (var k = 0; k < itemArr.length; k++) {
            if (!!itemArr[k]) {
              var item = itemArr[k].split(/\t/);
              if (item[0] === '起点城市' || item[0] === '迁出城市') {
                var cityBegin = item[1];
              }
              if (item[0] !== '起点城市' || item[0] !== '迁出城市' && item.length > 1) {
                var cityCenter1 = mapv.utilCityCenter.getCenterByCityName(item[0].replace(/市|省/, ""));
                var cityCenter2 = mapv.utilCityCenter.getCenterByCityName(cityBegin.replace(/市|省/, "").trim());
                if (cityCenter1) {
                  if (Math.random() > 0.7) {
                    curive(cityCenter2, cityCenter1, 50);
                  }
                  data.push({
                    geometry: {
                      type: 'LineString',
                      coordinates: [
                        ol.proj.transform(
                          [cityCenter1.lng - 1 + Math.random() * 1,
                            cityCenter1.lat - 1 + Math.random() * 1
                          ], 'EPSG:4326', 'EPSG:3857'),

                        ol.proj.transform([
                          cityCenter2.lng - 1 + Math.random() * 1,
                          cityCenter2.lat - 1 + Math.random() * 1
                        ], 'EPSG:4326', 'EPSG:3857')
                      ]
                    },
                    count: 100 * Math.random()
                  });
                }
              }
            }
          }
        }

        var dataSet = new mapv.DataSet(data);
        var options = {
          strokeStyle: 'rgba(55, 50, 250, 0.3)',
          globalCompositeOperation: 'lighter',
          shadowColor: 'rgba(55, 50, 250, 0.5)',
          methods: {
            click: function (item) {}
          },
          gradient: {
            0: 'rgba(55, 50, 250, 0)',
            1: 'rgba(55, 50, 250, 1)'
          },
          lineWidth: .2,
          draw: 'intensity'
        };

        map.addLayer(
          new ol.layer.Image({
            source: new ol.source.Mapv({
              map: map,
              dataSet: dataSet,
              mapVOptions: options
            })
          })
        );

        var dataSet = new mapv.DataSet(timeData);
        var options = {
          fillStyle: 'rgba(255, 250, 250, 0.9)',
          size: 1.5,
          animation: {
            type: 'time',
            stepsRange: {
              start: 0,
              end: 50
            },
            trails: 1,
            duration: 5,
          },
          draw: 'simple'
        };
        let mapvlayer = new ol.source.Mapv({
          map: map,
          dataSet: dataSet,
          mapVOptions: options
        })

/*         map.addLayer(
          new ol.layer.Image({
            source: mapvlayer
          }));

        console.log('mapvlayer', mapvlayer)

        var newoptions = {
          fillStyle: 'rgba(0, 250, 250, 0.9)',
          size: .5,
          animation: {
            type: 'time',
            stepsRange: {
              start: 0,
              end: 50
            },
            trails: 1,
            duration: 5,
          },
          draw: 'simple'
        };
        mapvlayer.updateData(dataSet, newoptions); */
      }
    });
  </script>


</body>

</html>